import React,{useState,useEffect,useRef} from 'react'
import { Space, Table, Button, Modal, Form, Input } from 'antd'
import Editor from 'wangeditor'

// 模拟表格数据
const data = [
  {
    id: 1,
    clazz: '一年级一班',
    name: '张三',
    reason: '牙疼',
    long: '三小时',
    createTime: '2021-01-05 07:07:07'
  }
]

export default function Application() {
    // 表格中的列的定义
    const columns = [
      {
        title: '序号', // 列标题
        dataIndex: 'id', // 数据项（对象）中的属性名
        key: 'id', // 标识，有 dataIndex 的不同设置，可省略
      },
      {
        title: '班级',
        dataIndex: 'clazz'
      },
      {
        title: '姓名',
        dataIndex: 'name'
      },
      {
        title: '原因',
        dataIndex: 'reason'
      },
      {
        title: '请假时长',
        dataIndex: 'long'
      },
      {
        title: '提交时间',
        dataIndex: 'createTime'
      },
      {
        title: '操作',
        key: 'option',
        render() {
          return (
            <Space>
              <Button type="primary">详情</Button>
              <Button type="primary">修改</Button>
              <Button type="danger">删除</Button>
            </Space>
          )
        }
      }
    ]
    // 表单实例引用
    const [form] = Form.useForm()
    // 模态对话框显示/隐藏标记
    const [visible, setVisible] = useState(false)

    // 富文本编辑容器 引用
    const editorRef = useRef()
    // 富文本编辑器 引用
    const _editorRef = useRef()
    // let editor = null

    // componentDidMount()
    useEffect(() => {
      // 创建富文本编辑器对象
      let editor = new Editor(editorRef.current)
      _editorRef.current = editor

      // 配置
      editor.config.height = 100
      editor.config.menus = [
        'bold',
        'fontSize',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'image',
        'table',
      ]
      editor.config.showFullScreen = false

      // 渲染
      editor.create()

      
      // 设置初始数据
      editor.txt.html(`
      <div data-element="head" er="">
      <h1 id="开始使用">开始使用</h1>
      <p>请查看下级目录的内容。</p>
      <footer class="page-footer"><span class="copyright">Copyright © wangEditor (2020 - present) all right reserved，powered by Gitbook</span><span class="footer-modification">File Modify: 
      2021-01-22 01:03:47
      </span></footer><footer></footer>
      </div>
    `)


      // componentWillUnmount() 销毁资源
      return () => {
        editor.destroy()
        editor = null
      }
    },[])

  return (
    <div>
      <Button type="primary" onClick={() => setVisible(true)}>添加申请</Button>

      <Table
        bordered
        columns={columns}
        dataSource={data}
        style={{marginTop:10}}
      />

      <Modal
        forceRender
        visible={visible}
        title='添加新用户'
        okText='添加' 
        cancelText="取消"
        onCancel={() => {
          setVisible(false)
        }}
        onOk={() => {
          form
            .validateFields()
            .then((values) => {
              // console.log(values)
              // 获取富文本编辑器中输入的 html 数据
              const html = _editorRef.current.txt.html()
              console.log('确定',values,html)
              form.resetFields();
            })
            .catch((info) => {
              console.log('Validate Failed:', info);
            });
        }}
      >
         <Form
            form={form}
            name="form_in_modal"
            initialValues={{
              type:1,
              isOut:0,
              symptom:'无'
            }}
          >
            <Form.Item name="id" hidden>
              <Input />
            </Form.Item>
            <Form.Item name="clazz" label="班级">
              <Input />
            </Form.Item>
            <Form.Item name="name" label="姓名">
              <Input />
            </Form.Item>
            <Form.Item name="reason" label="原因">
              <Input />
            </Form.Item>
            <Form.Item label="详情说明">
              <div ref={editorRef} ></div>
            </Form.Item>
          </Form>

      </Modal>

    </div>
  )
}
